<template>
    <!-- 移动端遮罩层 -->
    <div v-if="isMobile && !collapsed" 
         class="fixed inset-0 bg-black bg-opacity-50 z-40"
         @click="collapsed = true"></div>
         
    <nav class="fixed md:relative h-screen bg-[#F8F9FA] flex flex-col transition-all duration-300 z-50 border-r-2"
         :class="{ 
            'w-[33%] min-w-[150px] max-w-[200px]': isMobile && !collapsed,
            'w-0 overflow-hidden': isMobile && collapsed,
            'w-[17.5rem] min-w-[17.5rem]': !isMobile
         }">
        <!-- 顶部 logo -->
        <Top :collapsed="false"></Top>
        
        <!-- 导航菜单 -->
        <div class="flex-1 flex flex-col space-y-1 p-4">
            <router-link v-for="link in navLinks" 
                :key="link.path"
                :to="disabled ? '' : link.path"
                class="flex items-center px-4 py-3 rounded-xl hover:bg-gray-200 active:bg-gray-200"
                :class="{ 
                    'bg-gray-200': $route.path === link.path,
                    'pointer-events-none opacity-50': disabled
                }">
                <el-icon class="mr-4">
                    <component :is="link.icon"></component>
                </el-icon>
                <span :class="{'text-gray-900': $route.path === link.path, 'text-gray-700': $route.path !== link.path}">
                    {{ link.text }}
                </span>
            </router-link>
        </div>
        
        <NavBottom :collapsed="false"></NavBottom>
    </nav>
    
    <!-- 移动端菜单切换按钮 -->
    <div v-if="isMobile" class="fixed top-4 left-4 z-50">
        <button @click="collapsed = !collapsed" 
                class="bg-white rounded-full p-2 shadow-md text-gray-500">
            <el-icon v-if="collapsed"><Expand /></el-icon>
            <el-icon v-else><Fold /></el-icon>
        </button>
    </div>
</template>

<script setup>
import NavBottom from './bottom.vue'
import Top from './top.vue'
import { Tickets, Histogram, Platform, Avatar, HomeFilled, Expand, Fold } from '@element-plus/icons-vue'
import { computed, ref, onMounted, onUnmounted } from 'vue'

const props = defineProps({
    disabled: {
        type: Boolean,
        default: false
    }
})

const navLinks = computed(() => [
    { path: '/homeFilled', icon: HomeFilled, text: '仪表盘' },
    { path: '/analysis', icon: Histogram, text: '智测' },
    { path: '#', icon: Platform, text: '试题' },
    { path: '/exercise', icon: Tickets, text: '练习' },
    { path: '/student', icon: Avatar, text: '学生' }
])

// 移动端适配
const isMobile = ref(false)
const collapsed = ref(false)

// 检测屏幕宽度
const checkScreenWidth = () => {
    isMobile.value = window.innerWidth < 768
    // 在移动端默认折叠导航栏
    if (isMobile.value) {
        collapsed.value = true
    } else {
        collapsed.value = false
    }
}

onMounted(() => {
    checkScreenWidth()
    window.addEventListener('resize', checkScreenWidth)
})

onUnmounted(() => {
    window.removeEventListener('resize', checkScreenWidth)
})
</script>